@import"./reset";
@import"./common";
@import"./vw";
header{
    // width: vw(750);
    .top{
        width: vw(700);
        height: vw(57);
        margin: 0 auto;
        margin-top: vw(30);
        display: flex;
        justify-content: space-between;
        .top1{
            width: vw(120);
            height: vw(57);
            border: 1px solid #ff9344;
            border-radius: vw(20);
            font-size: vw(26);
            line-height: vw(60);
            text-align: center;
        }
        .top2 span{
            font-size: vw(26);
        }
        .top3 select{
            width: vw(150);
            border: 1px solid #ff9344;
            font-size: vw(26);
        }
    }
}
section{
    // width: vw(750);
    .search{
        width: vw(263);
        height: vw(60);
        border: 1px solid #ff9344;
        border-radius:vw(22);
        line-height: vw(56);
        margin: 0 auto;
        margin-top: vw(35);
        padding-left: vw(5);
        input[type="text"]{
            border: none;
            width: vw(210);
            height: vw(26);
            font-size: vw(24);
        }
        input[type="image"]{
            width: vw(29);
            height: vw(30);
            vertical-align: middle;
        }
    }
    .search-bot{
        span{
        // width: vw(750);
        display: flex;
        justify-content: center;
        font-size: vw(26);
        margin-top: vw(30);
        margin-bottom: vw(20);
        }
        table{
            width: vw(510);
            height: vw(131);
            margin: 0 auto;
            margin-bottom: vw(30);
        }
        td{
            width: vw(125);
            height: vw(64);
            background: #dcdcdc;
            text-align: center;
        }
        a{
            color: #a0a0a0;
            // background: #dcdcdc;
            margin: vw(10);
            width: vw(80);
            font-size: vw(20);
        }     
    }
    .food{
        width: vw(700);
        height: vw(65);
        display: flex;
        justify-content: space-between;
        line-height: vw(57);
        margin: 0 auto;
        .left{
            display: flex;
        }
        .left img{
            width: vw(50);
            height: vw(56);
        }  
        .left span{
            font-size: vw(30);
            margin-left: vw(10);
            line-height: vw(65);
        }
        .right img{
            width: vw(20);
        }
        .right a{
            color: black;
            font-size: vw(24);
            line-height: vw(65);
        }
    } 
    .food-img{
        // width: vw(750);
        height: vw(400);
        margin-top: vw(30);
    }
    .food-img img:first-of-type{
        width: vw(280);
        height: vw(352);
        float: left;
        margin-left:vw(10);
        margin-right: vw(10);
    }
        .food-img img:nth-of-type(2){
            width: vw(430);
            height: vw(147);
            float: left; 
            margin-bottom: vw(10);
        }
        .food-img img:nth-of-type(3){
            width: vw(210);
            height: vw(195);
        }
        .food-img img:nth-of-type(4){
            width: vw(210);
            height: vw(195);
        }
    
    .food-img-2{
        width: vw(700);
        height: vw(231);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 0 auto;
        img{
            width: vw(220);
            height: vw(200);
        }
    } 
}